<template>
  <span>{{ colorValue }}</span>
  <el-color-picker
    v-model="colorValue"
    :disabled="widget.options.disabled"
    :size="widget.options.size"
    :show-alpha="widget.options.showAlpha"
    :popper-class="widget.options.popperClass"
    :validateEvent="widget.options.validateEvent"
    @focus.stop="selectField"
  >
    <slot></slot>
  </el-color-picker>
</template>

<script setup>
import { ref, watch } from "vue";
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";

defineOptions({
  name: "colorpickerWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});
let colorValue = ref(null);
//监听颜色改变，传值给属性里的modelValue
watch(
  () => colorValue.value,
  (newValue, oldValue) => {
    $props.widget.options.modelValue = newValue;
  }
);
//监听属性里的modelValue改变，传值给colorValue
watch(
  () => $props.widget.options.modelValue,
  (newValue, oldValue) => {
    colorValue.value = newValue
  }
);
let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped></style>
